<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #container{ width: 300px; height: 300px; background-color: #f3f4f7; }
        #container .child{ width: 100px; height: 100px; background-color: green; }
        #container .child .mini{ width: 50px; height: 50px; background-color: orange; }

        .tips{ font-size: 14px; color: #999; }
    </style>
</head>
<body>

    <div id="container">

    </div>
    <p class="tips">双击即将出现的橙色小块试试看吧！</p>

    <script src="../js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
    <script src="jquery.hammer.js"></script>
    <script>

        setTimeout(() => {
            $('#container').append($('<div class="child"><div class="mini"></div></div>'))
        }, 1000);

        $('#container').hammer({ domEvents: true }).on('press', '.mini', function(e){
            console.log(e);
            $(this).css('background-color', 'yellow')

        })

        var hammer = new Hammer($('#container')[0], {});
        hammer.on('doubletap', function(e){
            
        })
        
    </script>
    
</body>
</html>